<template>
  <el-dialog :visible.sync="dialogVisible" width="700px"
             title="选择邮件模板" center>
    <ul class="dialogTemp">
      <li v-for="item,index in tempList" :key="index">
        <div class="the-content" >
          <div v-html="item.htmlContent"></div>
        </div>
        <h1 class="my-title">
          <el-radio v-model="isFrag" :label="index">{{item.htmlName}}</el-radio>
        </h1>
      </li>
    </ul>
    <!-- 底部按钮-->
    <div slot="footer" class="dialog-footer" align="right">
      <el-button @click="dialogVisible = false" size="mini">取 消</el-button>
      <el-button type="primary" size="mini" @click="submit">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
    import {query} from "@/api/mail/admin/mail-sign";

    export default {
        name: "DialogTemp",
        data() {
            return {
                dialogVisible: false,
                tempList: [],
                isFrag: 0,
                form: {
                    emailContent: ''
                }
            }
        },
        methods: {
            submit() {
                this.form.emailContent = this.tempList[this.isFrag].htmlContent;
                this.$emit('getDialogInfo', this.form.emailContent)
                this.dialogVisible = false;
            },
            init() {
                this.getTemp();
            },
            choose(item, index) {
                this.isFrag = index;
            },
            getTemp() {
                query({type: 2}).then(res => {
                    this.tempList = res.data.data;
                    if(this.tempList.length==0){
                        this.$confirm('您还尚未创建邮件模板，立即去创建?', '提示', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: "success"
                        }).then(() => {
                            this.$store.commit('SET_CURRENTSETFRAG','fifth')
                            this.$router.push('/mail/administration')
                        }).catch(() => {
                        });
                    }else{
                        this.dialogVisible = true;
                    }
                }).catch(err => {
                    console.log(err)
                });
            },
        }
    }
</script>

<style scoped lang="scss">
  .el-dialog__header {
    padding: 20px 20px 25px;
  }

  .dialogTemp {
    display: flex;
    /*justify-content: space-around;*/
    flex-wrap: wrap;
    max-height: 600px;
    overflow-y: scroll;
    li {
      width: 200px;
      height: 300px;
      background-color: #E9F3FD;

      .the-content {
        height: 250px;
        border: 0;
        font-size: .2em;
        overflow: hidden;
        transform: scale(0.5) translateX(0) translateY(0);
        img{
          width: 100%;
          height: 100%;
        }
      }

      .my-title {
        line-height: 50px;
        background-color: #fff;
      }
    }
    li:nth-child(even){
      margin: 0 26px;
    }
  }
</style>
